<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input
                class="new-todo"
                placeholder="What needs to be done?"
                autofocus
                v-model="message"
                @keydown.enter="inputChange"
            />
            <!-- <div>{{ message }}</div -->
        </header>
        <!-- This section should be hidden by default and shown when there are todos -->
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <!-- <li class="completed">
						<div class="view">
							<input class="toggle" type="checkbox" checked>
							<label>5463463456</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li> -->
					<!-- <li class="editing">
						<div class="view">
							<input class="toggle" type="checkbox" checked>
							<label>Taste JavaScript</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li> -->
					<li class="view" v-for="(item,index) in list" :key="index">
						<div>
							<input class="toggle" type="checkbox">
							<label>{{ item.text }}</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Rule the web">
					</li>
            </ul>
        </section>
        <!-- This footer should hidden by default and shown when there are todos -->
        <footer class="footer">
            <!-- This should be `0 items left` by default -->
            <span class="todo-count"><strong>0</strong> item left</span>
            <!-- Remove this if you don't implement routing -->
            <ul class="filters">
                <li>
                    <a class="selected" name="all" href="javascript:;">All</a>
                </li>
                <li>
                    <a name="active" href="javascript:;">Active</a>
                </li>
                <li>
                    <a name="completed" href="javascript:;">Completed</a>
                </li>
            </ul>
            <!-- Hidden if no completed items are left ↓ -->
            <button class="clear-completed">Clear completed</button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="javascript:;">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="javascript:;">you</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
    </footer>
</template>

<script>
export default {
    data() {
        return {
            list:[],
            message:''            
        }
    },
    methods:{
        inputChange(){
            console.log(this.list)
            this.list.push({
                text: this.message
            })
            console.log(this.list)
        }
    }
};
</script>

<style></style>
